<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSV 解析示例</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f4f4f4;
        }
    </style>
</head>
<body>
    <h2>CSV 文件解析</h2>
    <input type="file" id="csvFile" accept=".csv">
    <table id="csvTable"></table>

    <script>
        document.getElementById("csvFile").addEventListener("change", function (event) {
            const file = event.target.files[0];
            if (!file) return;

            const reader = new FileReader();
            reader.onload = function (e) {
                const text = e.target.result;
                parseCSV(text);
            };
            reader.readAsText(file);
        });

        function parseCSV(csvText) {
            const rows = csvText.split("\n").map(row => row.split(","));
            const table = document.getElementById("csvTable");
            table.innerHTML = ""; // 清空表格

            rows.forEach((row, rowIndex) => {
                const tr = document.createElement("tr");
                row.forEach(cell => {
                    const td = document.createElement(rowIndex === 0 ? "th" : "td");
                    td.textContent = cell.trim();
                    tr.appendChild(td);
                });
                table.appendChild(tr);
            });
        }
    </script>
</body>
</html>
